// 附近旅舍页面
<template>
  <div
    class="wrap"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
    infinite-scroll-distance="400"
  >
    <ElHeader></ElHeader>
    <el-container>
      <div class="bgi">
        <img
          width="100%"
          src="http://www.yhachina.com/images/exhibition/exhibition-banner.jpg"
          alt=""
        />
        <div class="text">
          <span class="title">{{ cs }}旅舍推荐</span>
          <el-select
            class="select"
            v-model="pid"
            filterable
            placeholder="请选择城市"
            remote
            @change="search"
          >
            <el-option
              v-for="item in options"
              :key="item.pid"
              :label="item.pname"
              :value="item.pid"
            >
            </el-option>
          </el-select>
          <el-divider></el-divider>
          <div>
            <el-row>
              <el-col
                :span="24"
                v-for="item in hotel"
                :key="item.hid"
                class="row"
              >
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div class="box">
                    <img :src="item.himg" class="image" />
                    <div class="box1" style="padding: 14px">
                      <span>{{ item.hname }}</span>
                      <p>
                        {{ item.hlocation }}
                      </p>

                      <div class="bottom clearfix">
                        <span
                          >城市：{{
                            item.pname != undefined ? item.pname : cs
                          }}</span
                        >
                        <el-button
                          round
                          class="button"
                          type="warning"
                          size="small"
                          @click="jumpIn(item.hid)"
                          >立即预定</el-button
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <p v-if="loading" style="text-align: center">加载中...</p>
          <p v-if="noMore" style="text-align: center">没有更多了~</p>
        </div>
      </div>
    </el-container>
    <ElFooter></ElFooter>
  </div>
</template>

<script>
import ElFooter from '@/components/ElFooter.vue'
import ElHeader from '@/components/ElHeader.vue'
export default {
  components: { ElFooter, ElHeader },
  data() {
    return {
      hotel: {
        proid: '',
        hname: '',
        himg: '',
        hlocation: '',
        pname: '',
        hid:''
      },

      options: {
        pid: '', //value
        pname: '', //lable
      },
      pid: '',
      cs: '',
      loading: false,
      page: '',
      total: '',
      pagesize: '',
    }
  },

  mounted() {
    this.$http.lsApi.queryCity({ page: 1, pagesize: 5 }).then((res) => {
      console.log('旅社', res)
      this.hotel = res.data.data
      console.log(this.hotel)
      this.page = res.data.page
      this.pagesize = res.data.pagesize
      this.total = res.data.total
      console.log(this.page, this.pagesize, this.total)
    })

    this.$http.dwApi.queryAll().then((res) => {
      console.log('城市', res)
      this.options = res.data.data
      console.log(this.options)
    })
  },
  computed: {
    noMore() {
      console.log(
        'this.hotel.length',
        this.hotel.length,
        'this.total',
        this.total
      )
      return this.hotel.length >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    },
  },
  methods: {
    jumpIn(id) {
      console.log('房子编号', id)
      this.$router.push(`/hotellist/${id}`)
    },
    load() {
      this.loading = true
      console.log('加载')
      setTimeout(() => {
        console.log('page', this.page)
        if (this.pid == '') {
          this.page++
          this.$http.lsApi
            .queryCity({ page: this.page, pagesize: 5 })
            .then((res) => {
              console.log('旅社', res)
              this.hotel.push(...res.data.data)
              console.log(this.hotel)
            })
        } else {
          this.page++
          this.$http.lsApi
            .queryCityRoom({ page: this.page, pagesize: 5, proid: this.pid })
            .then((res) => {
              console.log('旅社111111', res)
              this.hotel.push(...res.data.data)
              console.log(this.hotel)
            })
        }

        this.loading = false
      }, 200)
    },
    search(query) {
      this.hotel.length = 0
      this.total = 0
      console.log(this.pid)
      this.cs = this.options[this.pid - 1].pname
      this.$http.lsApi
        .queryCityRoom({ page: 1, pagesize: 5, proid: this.pid })
        .then((res) => {
          console.log('旅社111111', res)
          this.hotel.push(...res.data.data)
          console.log(this.hotel)
          this.page = res.data.page
          this.pagesize = res.data.pagesize
          this.total = res.data.total
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  height: 100vh;
  overflow-y: auto;
}
.row {
  transition: 0.3s;
  margin-left: 20px;
}
.row:hover {
  transform: scale(1.01);
}

.card {
  height: 140px;
  margin-bottom: 10px;
  width: 1000px;
}
.box {
  display: flex;
  height: 140px;
  width: 1000px;
  .box1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > span {
      font-size: 18px;
      font-weight: bold;
    }
    p {
      text-indent: 0;
      line-height: 20px;
      height: 40px;
      margin: 10px 0;
      overflow: hidden;
      display: -webkit-box;

      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    div {
      height: 30px;
      span {
        line-height: 30px;
      }
      .button {
        float: right;
      }
    }
  }
}
time {
  font-size: 13px;
  color: #999;
}

.image {
  width: 20%;
  display: block;
  border-radius: 5px;
}
.bgi {
  padding: 0;
  margin-top: 30px;
  width: 100%;
  .text {
    background-color: white;
    width: 1080px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    bottom: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .title {
      font-size: 30px;
    }
    .select {
      position: absolute;
      right: 15px;
    }
  }
}

.footer {
  background: #282a2b;

  height: 300px;

  .footerhead {
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    line-height: 50px;

    .bold {
      color: white;
    }
  }

  .footerbody {
    width: 900px;
    margin: 0 auto;
    position: relative;

    .yi {
      position: absolute;
      right: 0;
      color: #696a6b;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      text-align: right;
      height: 40px;
    }

    .er {
      position: absolute;
      right: 0;
      top: 45px;
    }

    .san {
      position: absolute;
      right: 0;
      top: 90px;
      color: #696a6b;
      font-size: 12px;
      width: 250px;
      display: flex;
      justify-content: space-between;

      .wo {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }

    .si {
      position: absolute;
      right: 0;
      top: 130px;
      height: 20px;
      line-height: 20px;
      display: flex;
      width: 500px;
      justify-content: space-between;

      span {
        font-size: 12px;
        color: #696a6b;
      }

      .ni {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }
  }
}
.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
